<template>
  <figure>
    <router-link :to="item.link" class="jury-link">
      <div class="img-box">
        <i></i>
        <i></i>
        <img :src="item.avatar" :alt="item.name" class="jury-avatar">
      </div>
      <figcaption>
        <h3 class="jury-name">{{item.name}}</h3>
        <div class="jury-intro">
          <p>{{item.intro}}</p>
        </div>
      </figcaption>
    </router-link>
  </figure>
</template>
<script>
  export default {
    name: 'Profile',
    props: {
      item: {
        type: Object,
      },
    }
  }
</script>
<style lang="scss" scoped>
  figure {
    margin: 0 20px;
    display: block;
    &:hover {
      .img-box i {
        opacity: 1;
        &:first-of-type {
          transform: scale(1);
          transition-delay: 0.075s;
        }
        &:last-of-type {
          transform: scale(1.08);
        }
      }
      .img-box img {
        transform: scale(0.926);
      }
    }
    .img-box {
      position: relative;
      visibility: visible;
      &::before {
        padding-top: 100%;
        content: '';
        display: block;
      }
      i {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        border: 1px solid #dbdbdb;
        opacity: 0;
        transition: all .3s;
        &:first-of-type {
          transform: scale(0.926);
        }
      }
      img {
        border-radius: 50%;
        width: 100%;
        position: absolute;
        transition: all 0.3s;
        top: 0;
        left: 0;
      }
    }
    figcaption {
      margin-top: 40px;
      h3.jury-name {
        height: 2em;
        font: 700 24px/2 "Futura";
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .jury-intro {
        position: relative;
        padding: .75em 2.5em .75em 0;
        margin-top: 5px;
        border: solid grey;
        border-width: 1px 0;
        font: 500 14px/2 "Futura";
        color: grey;
        letter-spacing: .02em;
        &::after {
          content: '\e605';
          position: absolute;
          top: 50%;
          right: 0;
          margin-top: -.5em;
          font-family: 'iconfont';
          font-size: 24px;
          line-height: 1;
          color: grey;
        }
        p {
          height: 4em;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
</style>
